<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
	$(function() {
		$('#container').highcharts({
			chart : {
				zoomType : 'xy'
			},
			title : {
				text : 'Average Monthly Weather Data for Tokyo'
			},
			subtitle : {
				text : 'Source: WorldClimate.com'
			},
			xAxis : [ {
				categories : [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]
			} ],
			yAxis : [ { // Primary yAxis
				labels : {
					formatter : function() {
						return this.value + '°C';
					},
					style : {
						color : '#89A54E'
					}
				},
				title : {
					text : 'Temperature',
					style : {
						color : '#89A54E'
					}
				},
				opposite : true

			}, { // Secondary yAxis
				gridLineWidth : 0,
				title : {
					text : 'Rainfall',
					style : {
						color : '#4572A7'
					}
				},
				labels : {
					formatter : function() {
						return this.value + ' mm';
					},
					style : {
						color : '#4572A7'
					}
				}

			}, { // Tertiary yAxis
				gridLineWidth : 0,
				title : {
					text : 'Sea-Level Pressure',
					style : {
						color : '#AA4643'
					}
				},
				labels : {
					formatter : function() {
						return this.value + ' mb';
					},
					style : {
						color : '#AA4643'
					}
				},
				opposite : true
			} ],
			tooltip : {
				shared : true
			},
			legend : {
				layout : 'vertical',
				align : 'left',
				x : 120,
				verticalAlign : 'top',
				y : 80,
				floating : true,
				backgroundColor : '#FFFFFF'
			},
			series : [ {
				name : 'Rainfall',
				color : '#4572A7',
				type : 'column',
				yAxis : 1,
				data : [ 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 ],
				tooltip : {
					valueSuffix : ' mm'
				}

			}, {
				name : 'Sea-Level Pressure',
				type : 'spline',
				color : '#AA4643',
				yAxis : 2,
				data : [ 1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7 ],
				marker : {
					enabled : false
				},
				dashStyle : 'shortdot',
				tooltip : {
					valueSuffix : ' mb'
				}

			}, {
				name : 'Temperature',
				color : '#89A54E',
				type : 'spline',
				data : [ 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 ],
				tooltip : {
					valueSuffix : ' °C'
				}
			} ]
		});
	});
</script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
